﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | UI Sliders</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
    <link href="../../plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Font Awesome -->
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
    <link href="../../plugins/Ionicons/css/ionicons.min.css" rel="stylesheet" />
  <!-- bootstrap slider -->
    <link href="../../plugins/bootstrap-slider/slider.css" rel="stylesheet" />
  <!-- Theme style -->
    <link href="../../plugins/adminLTE/dist/css/AdminLTE.min.css" rel="stylesheet" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link href="../../plugins/adminLTE/dist/css/skins/all-skins.min.css" rel="stylesheet" />
</head>
<body class="hold-transition skin-blue sidebar-mini" style="background-color:#ecf0f5">
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">Bootstrap Slider</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="row margin">
                            <div class="col-sm-6">
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
                                <p>data-slider-id="red"</p>
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
                                <p>data-slider-id="blue"</p>
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
                                <p>data-slider-id="green"</p>
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
                                <p>data-slider-id="yellow"</p>
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="aqua">
                                <p>data-slider-id="aqua"</p>
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
                                <p style="margin-top: 10px">data-slider-id="purple"</p>
                            </div>
                            <div class="col-sm-6 text-center">
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="aqua">
                                <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
                                       data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
                                       data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- ./wrapper -->
    <!-- jQuery 3 -->
    <script src="../../plugins/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="../../plugins/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="../../plugins/fastclick/lib/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="../../plugins/adminLTE/dist/js/adminlte.min.js"></script>
    <!-- Bootstrap slider -->
    <script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
    <script>
        $(function () {
            /* BOOTSTRAP SLIDER */
            $('.slider').slider()
        })
    </script>
</body>
</html>
